---
import '../base.css';
import AddToCart from '../components/AddToCart';
import PersonalBar from '../components/PersonalBar.astro';
import '@fortawesome/fontawesome-free/css/all.min.css';
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Product - Ecommerce Tailwind</title>

		<link rel="shortcut icon" href="../assets/images/favicon/favicon.ico" type="image/x-icon" />

		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
			rel="stylesheet"
		/>
	</head>

	<body>
		<!-- header -->
		<header class="py-4 shadow-sm bg-white">
			<div class="container flex items-center justify-between">
				<a href="index.html">
					<img src="../assets/images/logo.svg" alt="Logo" class="w-32" />
				</a>

				<div class="w-full max-w-xl relative flex">
					<span class="absolute left-4 top-3 text-lg text-gray-400">
						<i class="fa-solid fa-magnifying-glass"></i>
					</span>
					<input
						type="text"
						name="search"
						id="search"
						class="w-full border border-primary border-r-0 pl-12 py-3 pr-3 rounded-l-md focus:outline-none"
						placeholder="search"
					/>
					<button
						class="bg-primary border border-primary text-white px-8 rounded-r-md hover:bg-transparent hover:text-primary transition"
						>Search</button
					>
				</div>

				<div class="flex items-center space-x-4">
					<PersonalBar server:defer>
						<PersonalBar placeholder slot="fallback" />
					</PersonalBar>
				</div>
			</div>
		</header>
		<!-- ./header -->

		<!-- navbar -->
		<nav class="bg-gray-800">
			<div class="container flex">
				<div class="px-8 py-4 bg-primary flex items-center cursor-pointer relative group">
					<span class="text-white">
						<i class="fa-solid fa-bars"></i>
					</span>
					<span class="capitalize ml-2 text-white">All Categories</span>

					<!-- dropdown -->
					<div
						class="absolute w-full left-0 top-full bg-white shadow-md py-3 divide-y divide-gray-300 divide-dashed opacity-0 group-hover:opacity-100 transition duration-300 invisible group-hover:visible"
					>
						<a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition">
							<img
								src="../assets/images/icons/sofa.svg"
								alt="sofa"
								class="w-5 h-5 object-contain"
							/>
							<span class="ml-6 text-gray-600 text-sm">Sofa</span>
						</a>
						<a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition">
							<img
								src="../assets/images/icons/terrace.svg"
								alt="terrace"
								class="w-5 h-5 object-contain"
							/>
							<span class="ml-6 text-gray-600 text-sm">Terarce</span>
						</a>
						<a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition">
							<img src="../assets/images/icons/bed.svg" alt="bed" class="w-5 h-5 object-contain" />
							<span class="ml-6 text-gray-600 text-sm">Bed</span>
						</a>
						<a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition">
							<img
								src="../assets/images/icons/office.svg"
								alt="office"
								class="w-5 h-5 object-contain"
							/>
							<span class="ml-6 text-gray-600 text-sm">office</span>
						</a>
						<a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition">
							<img
								src="../assets/images/icons/outdoor-cafe.svg"
								alt="outdoor"
								class="w-5 h-5 object-contain"
							/>
							<span class="ml-6 text-gray-600 text-sm">Outdoor</span>
						</a>
						<a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition">
							<img
								src="../assets/images/icons/bed-2.svg"
								alt="Mattress"
								class="w-5 h-5 object-contain"
							/>
							<span class="ml-6 text-gray-600 text-sm">Mattress</span>
						</a>
					</div>
				</div>

				<div class="flex items-center justify-between flex-grow pl-12">
					<div class="flex items-center space-x-6 capitalize">
						<a href="../index.html" class="text-gray-200 hover:text-white transition">Home</a>
						<a href="pages/shop.html" class="text-gray-200 hover:text-white transition">Shop</a>
						<a href="#" class="text-gray-200 hover:text-white transition">About us</a>
						<a href="#" class="text-gray-200 hover:text-white transition">Contact us</a>
					</div>
					<a href="#" class="text-gray-200 hover:text-white transition">Login/Register</a>
				</div>
			</div>
		</nav>
		<!-- ./navbar -->

		<!-- breadcrumb -->
		<div class="container py-4 flex items-center gap-3">
			<a href="../index.html" class="text-primary text-base">
				<i class="fa-solid fa-house"></i>
			</a>
			<span class="text-sm text-gray-400">
				<i class="fa-solid fa-chevron-right"></i>
			</span>
			<p class="text-gray-600 font-medium">Product</p>
		</div>
		<!-- ./breadcrumb -->

		<!-- product-detail -->
		<div class="container grid grid-cols-2 gap-6">
			<div>
				<img src="../assets/images/products/product1.jpg" alt="product" class="w-full" />
				<div class="grid grid-cols-5 gap-4 mt-4">
					<img
						src="../assets/images/products/product2.jpg"
						alt="product2"
						class="w-full cursor-pointer border border-primary"
					/>
					<img
						src="../assets/images/products/product3.jpg"
						alt="product2"
						class="w-full cursor-pointer border"
					/>
					<img
						src="../assets/images/products/product4.jpg"
						alt="product2"
						class="w-full cursor-pointer border"
					/>
					<img
						src="../assets/images/products/product5.jpg"
						alt="product2"
						class="w-full cursor-pointer border"
					/>
					<img
						src="../assets/images/products/product6.jpg"
						alt="product2"
						class="w-full cursor-pointer border"
					/>
				</div>
			</div>

			<div>
				<h2 class="text-3xl font-medium uppercase mb-2">Italian L Shape Sofa</h2>
				<div class="flex items-center mb-4">
					<div class="flex gap-1 text-sm text-yellow-400">
						<span><i class="fa-solid fa-star"></i></span>
						<span><i class="fa-solid fa-star"></i></span>
						<span><i class="fa-solid fa-star"></i></span>
						<span><i class="fa-solid fa-star"></i></span>
						<span><i class="fa-solid fa-star"></i></span>
					</div>
					<div class="text-xs text-gray-500 ml-3">(150 Reviews)</div>
				</div>
				<div class="space-y-2">
					<p class="text-gray-800 font-semibold space-x-2">
						<span>Availability: </span>
						<span class="text-green-600">In Stock</span>
					</p>
					<p class="space-x-2">
						<span class="text-gray-800 font-semibold">Brand: </span>
						<span class="text-gray-600">Apex</span>
					</p>
					<p class="space-x-2">
						<span class="text-gray-800 font-semibold">Category: </span>
						<span class="text-gray-600">Sofa</span>
					</p>
					<p class="space-x-2">
						<span class="text-gray-800 font-semibold">SKU: </span>
						<span class="text-gray-600">BE45VGRT</span>
					</p>
				</div>
				<div class="flex items-baseline mb-1 space-x-2 font-roboto mt-4">
					<p class="text-xl text-primary font-semibold">$45.00</p>
					<p class="text-base text-gray-400 line-through">$55.00</p>
				</div>

				<p class="mt-4 text-gray-600">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eius eum reprehenderit dolore
					vel mollitia optio consequatur hic asperiores inventore suscipit, velit consequuntur,
					voluptate doloremque iure necessitatibus adipisci magnam porro.
				</p>

				<div class="pt-4">
					<h3 class="text-sm text-gray-800 uppercase mb-1">Size</h3>
					<div class="flex items-center gap-2">
						<div class="size-selector">
							<input type="radio" name="size" id="size-xs" class="hidden" />
							<label
								for="size-xs"
								class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600"
								>XS</label
							>
						</div>
						<div class="size-selector">
							<input type="radio" name="size" id="size-sm" class="hidden" />
							<label
								for="size-sm"
								class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600"
								>S</label
							>
						</div>
						<div class="size-selector">
							<input type="radio" name="size" id="size-m" class="hidden" />
							<label
								for="size-m"
								class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600"
								>M</label
							>
						</div>
						<div class="size-selector">
							<input type="radio" name="size" id="size-l" class="hidden" />
							<label
								for="size-l"
								class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600"
								>L</label
							>
						</div>
						<div class="size-selector">
							<input type="radio" name="size" id="size-xl" class="hidden" />
							<label
								for="size-xl"
								class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600"
								>XL</label
							>
						</div>
					</div>
				</div>

				<div class="pt-4">
					<h3 class="text-xl text-gray-800 mb-3 uppercase font-medium">Color</h3>
					<div class="flex items-center gap-2">
						<div class="color-selector">
							<input type="radio" name="color" id="red" class="hidden" />
							<label
								for="red"
								class="border border-gray-200 rounded-sm h-6 w-6 cursor-pointer shadow-sm block"
								style="background-color: #fc3d57;"></label>
						</div>
						<div class="color-selector">
							<input type="radio" name="color" id="black" class="hidden" />
							<label
								for="black"
								class="border border-gray-200 rounded-sm h-6 w-6 cursor-pointer shadow-sm block"
								style="background-color: #000;"></label>
						</div>
						<div class="color-selector">
							<input type="radio" name="color" id="white" class="hidden" />
							<label
								for="white"
								class="border border-gray-200 rounded-sm h-6 w-6 cursor-pointer shadow-sm block"
								style="background-color: #fff;"></label>
						</div>
					</div>
				</div>

				<div class="mt-4">
					<h3 class="text-sm text-gray-800 uppercase mb-1">Quantity</h3>
					<div class="flex border border-gray-300 text-gray-600 divide-x divide-gray-300 w-max">
						<div
							class="h-8 w-8 text-xl flex items-center justify-center cursor-pointer select-none"
						>
							-
						</div>
						<div class="h-8 w-8 text-base flex items-center justify-center">4</div>
						<div
							class="h-8 w-8 text-xl flex items-center justify-center cursor-pointer select-none"
						>
							+
						</div>
					</div>
				</div>

				<div class="mt-6 flex gap-3 border-b border-gray-200 pb-5 pt-5">
					<AddToCart client:load />
					<a
						href="#"
						class="border border-gray-300 text-gray-600 px-8 py-2 font-medium rounded uppercase flex items-center gap-2 hover:text-primary transition"
					>
						<i class="fa-solid fa-heart"></i> Wishlist
					</a>
				</div>

				<div class="flex gap-3 mt-4">
					<a
						href="#"
						class="text-gray-400 hover:text-gray-500 h-8 w-8 rounded-full border border-gray-300 flex items-center justify-center"
					>
						<i class="fa-brands fa-facebook-f"></i>
					</a>
					<a
						href="#"
						class="text-gray-400 hover:text-gray-500 h-8 w-8 rounded-full border border-gray-300 flex items-center justify-center"
					>
						<i class="fa-brands fa-twitter"></i>
					</a>
					<a
						href="#"
						class="text-gray-400 hover:text-gray-500 h-8 w-8 rounded-full border border-gray-300 flex items-center justify-center"
					>
						<i class="fa-brands fa-instagram"></i>
					</a>
				</div>
			</div>
		</div>
		<!-- ./product-detail -->

		<!-- description -->
		<div class="container pb-16">
			<h3 class="border-b border-gray-200 font-roboto text-gray-800 pb-3 font-medium">
				Product details
			</h3>
			<div class="w-3/5 pt-6">
				<div class="text-gray-600">
					<p>
						Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur necessitatibus
						deleniti natus dolore cum maiores suscipit optio itaque voluptatibus veritatis tempora
						iste facilis non aut sapiente dolor quisquam, ex ab.
					</p>
					<p>
						Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, quae accusantium
						voluptatem blanditiis sapiente voluptatum. Autem ab, dolorum assumenda earum veniam eius
						illo fugiat possimus illum dolor totam, ducimus excepturi.
					</p>
					<p>
						Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quia modi ut expedita!
						Iure molestiae labore cumque nobis quasi fuga, quibusdam rem? Temporibus consectetur
						corrupti rerum veritatis numquam labore amet.
					</p>
				</div>

				<table class="table-auto border-collapse w-full text-left text-gray-600 text-sm mt-6">
					<tr>
						<th class="py-2 px-4 border border-gray-300 w-40 font-medium">Color</th>
						<th class="py-2 px-4 border border-gray-300">Blank, Brown, Red</th>
					</tr>
					<tr>
						<th class="py-2 px-4 border border-gray-300 w-40 font-medium">Material</th>
						<th class="py-2 px-4 border border-gray-300">Latex</th>
					</tr>
					<tr>
						<th class="py-2 px-4 border border-gray-300 w-40 font-medium">Weight</th>
						<th class="py-2 px-4 border border-gray-300">55kg</th>
					</tr>
				</table>
			</div>
		</div>
		<!-- ./description -->

		<!-- related product -->
		<div class="container pb-16">
			<h2 class="text-2xl font-medium text-gray-800 uppercase mb-6">Related products</h2>
			<div class="grid grid-cols-4 gap-6">
				<div class="bg-white shadow rounded overflow-hidden group">
					<div class="relative">
						<img src="../assets/images/products/product1.jpg" alt="product 1" class="w-full" />
						<div
							class="absolute inset-0 bg-black bg-opacity-40 flex items-center
                    justify-center gap-2 opacity-0 group-hover:opacity-100 transition"
						>
							<a
								href="#"
								class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition"
								title="view product"
							>
								<i class="fa-solid fa-magnifying-glass"></i>
							</a>
							<a
								href="#"
								class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition"
								title="add to wishlist"
							>
								<i class="fa-solid fa-heart"></i>
							</a>
						</div>
					</div>
					<div class="pt-4 pb-3 px-4">
						<a href="#">
							<h4
								class="uppercase font-medium text-xl mb-2 text-gray-800 hover:text-primary transition"
							>
								Guyer Chair
							</h4>
						</a>
						<div class="flex items-baseline mb-1 space-x-2">
							<p class="text-xl text-primary font-semibold">$45.00</p>
							<p class="text-sm text-gray-400 line-through">$55.90</p>
						</div>
						<div class="flex items-center">
							<div class="flex gap-1 text-sm text-yellow-400">
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
							</div>
							<div class="text-xs text-gray-500 ml-3">(150)</div>
						</div>
					</div>
					<AddToCart small client:load />
				</div>
				<div class="bg-white shadow rounded overflow-hidden group">
					<div class="relative">
						<img src="../assets/images/products/product4.jpg" alt="product 1" class="w-full" />
						<div
							class="absolute inset-0 bg-black bg-opacity-40 flex items-center
                    justify-center gap-2 opacity-0 group-hover:opacity-100 transition"
						>
							<a
								href="#"
								class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition"
								title="view product"
							>
								<i class="fa-solid fa-magnifying-glass"></i>
							</a>
							<a
								href="#"
								class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition"
								title="add to wishlist"
							>
								<i class="fa-solid fa-heart"></i>
							</a>
						</div>
					</div>
					<div class="pt-4 pb-3 px-4">
						<a href="#">
							<h4
								class="uppercase font-medium text-xl mb-2 text-gray-800 hover:text-primary transition"
							>
								Bed King Size
							</h4>
						</a>
						<div class="flex items-baseline mb-1 space-x-2">
							<p class="text-xl text-primary font-semibold">$45.00</p>
							<p class="text-sm text-gray-400 line-through">$55.90</p>
						</div>
						<div class="flex items-center">
							<div class="flex gap-1 text-sm text-yellow-400">
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
							</div>
							<div class="text-xs text-gray-500 ml-3">(150)</div>
						</div>
					</div>
					<AddToCart small client:load />
				</div>
				<div class="bg-white shadow rounded overflow-hidden group">
					<div class="relative">
						<img src="../assets/images/products/product2.jpg" alt="product 1" class="w-full" />
						<div
							class="absolute inset-0 bg-black bg-opacity-40 flex items-center
                    justify-center gap-2 opacity-0 group-hover:opacity-100 transition"
						>
							<a
								href="#"
								class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition"
								title="view product"
							>
								<i class="fa-solid fa-magnifying-glass"></i>
							</a>
							<a
								href="#"
								class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition"
								title="add to wishlist"
							>
								<i class="fa-solid fa-heart"></i>
							</a>
						</div>
					</div>
					<div class="pt-4 pb-3 px-4">
						<a href="#">
							<h4
								class="uppercase font-medium text-xl mb-2 text-gray-800 hover:text-primary transition"
							>
								Couple Sofa
							</h4>
						</a>
						<div class="flex items-baseline mb-1 space-x-2">
							<p class="text-xl text-primary font-semibold">$45.00</p>
							<p class="text-sm text-gray-400 line-through">$55.90</p>
						</div>
						<div class="flex items-center">
							<div class="flex gap-1 text-sm text-yellow-400">
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
							</div>
							<div class="text-xs text-gray-500 ml-3">(150)</div>
						</div>
					</div>
					<AddToCart small client:load />
				</div>
				<div class="bg-white shadow rounded overflow-hidden group">
					<div class="relative">
						<img src="../assets/images/products/product3.jpg" alt="product 1" class="w-full" />
						<div
							class="absolute inset-0 bg-black bg-opacity-40 flex items-center
                    justify-center gap-2 opacity-0 group-hover:opacity-100 transition"
						>
							<a
								href="#"
								class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition"
								title="view product"
							>
								<i class="fa-solid fa-magnifying-glass"></i>
							</a>
							<a
								href="#"
								class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition"
								title="add to wishlist"
							>
								<i class="fa-solid fa-heart"></i>
							</a>
						</div>
					</div>
					<div class="pt-4 pb-3 px-4">
						<a href="#">
							<h4
								class="uppercase font-medium text-xl mb-2 text-gray-800 hover:text-primary transition"
							>
								Mattrass X
							</h4>
						</a>
						<div class="flex items-baseline mb-1 space-x-2">
							<p class="text-xl text-primary font-semibold">$45.00</p>
							<p class="text-sm text-gray-400 line-through">$55.90</p>
						</div>
						<div class="flex items-center">
							<div class="flex gap-1 text-sm text-yellow-400">
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
								<span><i class="fa-solid fa-star"></i></span>
							</div>
							<div class="text-xs text-gray-500 ml-3">(150)</div>
						</div>
					</div>
					<AddToCart small client:load />
				</div>
			</div>
		</div>
		<!-- ./related product -->

		<!-- footer -->
		<footer class="bg-white pt-16 pb-12 border-t border-gray-100">
			<div class="container grid grid-cols-3">
				<div class="col-span-1 space-y-8 mr-2">
					<img src="../assets/images/logo.svg" alt="logo" class="w-30" />
					<div class="mr-2">
						<p class="text-gray-500">
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, hic?
						</p>
					</div>
					<div class="flex space-x-6">
						<a href="#" class="text-gray-400 hover:text-gray-500"
							><i class="fa-brands fa-facebook-square"></i></a
						>
						<a href="#" class="text-gray-400 hover:text-gray-500"
							><i class="fa-brands fa-instagram-square"></i></a
						>
						<a href="#" class="text-gray-400 hover:text-gray-500"
							><i class="fa-brands fa-twitter-square"></i></a
						>
						<a href="#" class="text-gray-400 hover:text-gray-500">
							<i class="fa-brands fa-github-square"></i>
						</a>
					</div>
				</div>

				<div class="col-span-2 grid grid-cols-2 gap-8">
					<div class="grid grid-cols-2 gap-8">
						<div>
							<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">
								Solutions
							</h3>
							<div class="mt-4 space-y-4">
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Marketing</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Analitycs</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Commerce</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Insights</a>
							</div>
						</div>

						<div>
							<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Support</h3>
							<div class="mt-4 space-y-4">
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Pricing</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block"
									>Documentation</a
								>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Guides</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">API Status</a>
							</div>
						</div>
					</div>
					<div class="grid grid-cols-2 gap-8">
						<div>
							<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">
								Solutions
							</h3>
							<div class="mt-4 space-y-4">
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Marketing</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Analitycs</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Commerce</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Insights</a>
							</div>
						</div>

						<div>
							<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Support</h3>
							<div class="mt-4 space-y-4">
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Pricing</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block"
									>Documentation</a
								>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Guides</a>
								<a href="#" class="text-base text-gray-500 hover:text-gray-900 block">API Status</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- ./footer -->

		<!-- copyright -->
		<div class="bg-gray-800 py-4">
			<div class="container flex items-center justify-between">
				<p class="text-white">&copy; TailCommerce - All Right Reserved</p>
				<div>
					<img src="../assets/images/methods.png" alt="methods" class="h-5" />
				</div>
			</div>
		</div>
		<!-- ./copyright -->
	</body>
</html>
